<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://use.fontawesome.com/def2bc066d.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <aside>
            <i class="fa fa-bars"></i>
            <i class="fa fa-home"></i>
            <i class="fa fa-search"></i>
            <i class="fa fa-volume-up"></i>
            <i class="fa fa-user"></i>
            <i class="fa fa-spotify"></i>
            <i class="fa fa-cog"></i>
            <i class="fa fa-soundcloud"></i>
        </aside>
        <section class="content">
            <div class="music-head">
                <img src="cattyboard.jpg" alt="">
                <section class="catty-music">
                    <div>
                        <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
                        <p>Unknown Artist</p>
                        <p>2016 . Charts . 100 songs</p>
                    </div>
                    <div>
                        <i class="fa fa-play">Play all</i>
                        <i class="fa fa-plus">Add to</i>
                        <i class="fa fa-ellipsis-h">More</i>
                    </div>
                </section>
            </div>
            <ul class="music-list">
                <li>
                    <p>1. One Dance</p>
                    <p>Crake feat CatKid & Cyla</p>
                    <p>2:54</p>
                    <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
                <li>
                    <p>2. Panda</p>
                    <p>Cattee</p>
                    <p>4:06</p>
                    <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
                <li>
                    <p>3. Can't Stop the Feeling!</p>
                    <p>Catin Cimberlake</p>
                    <p>3:56</p>
                    <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
                <li>
                    <p>4. Work From Home</p>
                    <p>Cat Harmony feat Colla</p>
                    <p>3:34</p>
                    <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
            </ul>

        </section>
    </main>
    <footer>
        <section id="song-details">
            <img src="cattyboard.jpg" alt="" class="xsm-hide">
            <div>
                <p>If It Ain't Love</p>
                <p>Catson Derulo</p>
            </div>
        </section>
        <section id="music-controls">
            <i class="fa fa-step-backward"></i>
            <i class="fa fa-pause"></i>
            <i class="fa fa-step-forward"></i>
            <i class="fas fa-redo sm-hide"></i>
            <i class="fa fa-random sm-hide"></i>
        </section>
    </footer>
</body>

</html>